<template>
    <div class="comment">
        <p class="pl">评论内容</p>
        <textarea name="" placeholder="请输入要吐槽的内容" maxlength="120" v-model="msg"></textarea>
        <mt-button size="large" type="primary" @click="getpost">发表评论</mt-button>
        <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
        <li class="mui-table-view-cell" v-for="(item,i) in comment" :key="i">
		            <div class="mui-table">
		                <div class="mui-table-cell mui-col-xs-10">
		                    <h4 class="mui-ellipsis">第{{i+1}}楼</h4>
		                    <h5>用户：{{item.user_name}}</h5>
		                    <p class="mui-h6 mui-ellipsis">{{item.content==='undefined'?'无内容':item.content}}</p>
		                </div>
		                <div class="mui-table-cell mui-col-xs-2 mui-text-right">
		                    <span class="mui-h5">{{item.add_time|dateFormat}}</span>
		                </div>
		            </div>
		        </li>
                </ul>
        <mt-button size="large" @click="getadd" type="danger" plain>加载更多</mt-button>
    </div>
</template>
<script>
import {Toast} from 'mint-ui'
export default {
    data () {
        return {
          comment:[],
          pageindex:1,
          msg:''
        }
    },
    created(){
    this.getComment()
    },
    methods:{
        getComment(){
            this.$axios.get('api/getcomments/'+this.id+'?pageindex='+this.pageindex).then(res=>{
                if(res.data.status===0){
                    // this.comment=res.data.message;
                    // 每当获取新数据时 拼接老数据
                    this.comment=this.comment.concat(res.data.message)
                    // console.log("评论"+this.comment)
                }else{
                    console.log("加载数据失败")
                }
            })
        },
    getpost(){
        if(this.msg.trim().length===0){
            return Toast("评论内容不能为空")
        }
        this.$axios.post(
            'api/postcomment/'+this.$route.params.id,
            {emulateJson:true},
            {content:this.msg.trim()
        }).then(res=>{
            console.log(res.data)
            if(res.data.status===0){
                var cmt={
                    user_name: "匿名用户",
                    add_time:Date.now(),
                    content:this.msg.trim()
                };
                this.comment.unshift(cmt);
                this.msg="";
            }
        })
    },
        getadd(){
            this.pageindex++;
            this.getComment();
        }
    },
    props: ['id'],
}
</script>
<style lang="scss" scoped>
.comment{
    .pl{
        color: red;
        font-size: 15px;
    }
    textarea{
        font-size: 12px;
    }
    .mui-ellipsis{
        font-size: 14px;
        color: #999;
    }
}
</style>
